import React from 'react'
import {Badge, Button, Card, Col, Input, message, Row, Space, Switch, Tag, Typography} from 'antd'
import {CheckCircle, Code, Database, RefreshCw, Settings} from 'lucide-react'
import type {DataSourceTreeNode} from '@/components/business/DataSourceTree/types'
import {useDataSourceStore} from '@/stores/dataSourceStore'

const { Title, Text } = Typography

const DatabasePanel: React.FC<{ node: DataSourceTreeNode }> = ({ node }) => {
  const databaseName = node.title as string
  const catalogName = node.parentId || ''
  const { syncDatabase, setEnabled, updateSystemCode } = useDataSourceStore()
  const [msgApi, contextHolder] = message.useMessage()
  const [enabled, setEnabledLocal] = React.useState<boolean>(!!node.enabled)
  const [systemCode, setSystemCodeLocal] = React.useState<string>('')

  const notify = (content: string, type: 'success' | 'error' = 'success') => msgApi.open({ type, content })

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {contextHolder}

      {/* 标题卡片 */}
      <Card style={{ border: 'none', background: 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Database size={28} style={{ color: '#ffffff', marginRight: 12 }} />
            <div>
              <Title level={3} style={{ color: '#ffffff', margin: 0, textShadow: '0 2px 4px rgba(0,0,0,0.3)' }}>
                {databaseName}
              </Title>
              <Text style={{ color: 'rgba(255, 255, 255, 0.85)', fontSize: 14 }}>
                数据库管理
              </Text>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Badge
              status={enabled ? 'success' : 'error'}
              text={
                <span style={{ color: '#ffffff', fontSize: 12 }}>
                  {enabled ? '已启用' : '已禁用'}
                </span>
              }
            />
            <Tag style={{ background: 'rgba(255, 255, 255, 0.2)', border: 'none', color: '#ffffff' }}>
              数据库
            </Tag>
          </div>
        </div>
      </Card>

      {/* 操作区域 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={16}>
          <Card
            title={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <RefreshCw size={16} style={{ marginRight: 8, color: '#1890ff' }} />
                数据库同步
              </div>
            }
            style={{ height: '100%' }}
          >
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
              <div>
                <Text type="secondary" style={{ marginBottom: 12, display: 'block' }}>
                  同步数据库结构和表信息
                </Text>
                <Button
                  type="primary"
                  icon={<Database size={14} />}
                  onClick={async () => {
                    if (!catalogName) return notify('缺少目录名', 'error')
                    await syncDatabase(catalogName, databaseName)
                    notify('数据库同步完成')
                  }}
                  block
                  size="large"
                >
                  同步数据库
                </Button>
              </div>
            </Space>
          </Card>
        </Col>

        <Col xs={24} lg={8}>
          <Card
            title={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Settings size={16} style={{ marginRight: 8, color: '#1890ff' }} />
                配置管理
              </div>
            }
            style={{ height: '100%' }}
          >
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <CheckCircle size={14} style={{ marginRight: 6, color: enabled ? '#52c41a' : '#c9cdd4' }} />
                  <Text>启用状态</Text>
                </div>
                <Switch
                  checked={enabled}
                  onChange={async (v) => {
                    setEnabledLocal(v)
                    if (!catalogName) return notify('缺少目录名', 'error')
                    await setEnabled({ level: 'database', catalogName, databaseName, enabled: v })
                  }}
                />
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                  <Code size={14} style={{ marginRight: 6, color: '#86909c' }} />
                  <Text>系统编码</Text>
                </div>
                <Input.Group compact>
                  <Input
                    style={{ width: 'calc(100% - 60px)' }}
                    value={systemCode}
                    onChange={(e) => setSystemCodeLocal(e.target.value)}
                    placeholder="输入系统编码"
                    size="small"
                  />
                  <Button
                    size="small"
                    type="primary"
                    onClick={async () => {
                      if (!systemCode) return notify('请先输入系统编码', 'error')
                      if (!catalogName) return notify('缺少目录名', 'error')
                      await updateSystemCode({ level: 'database', catalogName, databaseName, systemCode })
                      notify('系统编码已更新')
                    }}
                  >
                    保存
                  </Button>
                </Input.Group>
              </div>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default DatabasePanel